import React from 'react'
import '../styles/appleBasket.scss';
import AppleItem from './AppleItem';
import { inject, observer } from 'mobx-react'

@inject('apples')
@observer
class AppleBasket extends React.Component {
  constructor (props) {
    super(props)

  }
  getAppleItem = () => {
    const { apples, eatApple } = this.props.apples
    if (apples.length === 0) return  
    return <>
      {
        apples.map(apple => <AppleItem apple={apple} eatApple={eatApple} key={apple.id}/>)
      }
    </>
  }

  render () {
    const { apples, appleCount, eatedApplesCount, pickApple, totalWeight, totalEatedWeight } = this.props.apples
    return (
      <div className="appleBusket">
        <div className="title">苹果篮子</div>
  
        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">{appleCount}个苹果，{totalWeight}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">{eatedApplesCount}个苹果，{totalEatedWeight}克</div>
          </div>
        </div>
  
        <div className="appleList">
          { this.getAppleItem() }
        </div>
  
        <div className="btn-div">
          <button onClick={pickApple}>采摘</button>
        </div>
      </div>
    )
  }
  
}

export default AppleBasket